import * as echarts from 'echarts';
import axios from 'axios';
import { useState, useEffect } from 'react';

export default function Visitor() {
    // const [data, setdata] = useState([]);
    var newData = []
    useEffect(() => {
        var promise = new Promise((resolve, reject) => {
            axios({
                method: 'get',
                url: 'https://elm.cangdu.org/v1/user/city/count'
            }).then(res => {
                if (res.data.status == 1) {
                    console.log(res.data.user_city);
                    resolve(res.data.user_city)
                } else {
                    reject('请求失败')
                }
            })

        })
        newData.push(promise)
        Promise.all(newData).then(res => {
            console.log(res);
            myChart.setOption({
                series: [
                    {
                        data: [
                            { value: res[0].beijing, name: '北京' },
                            { value: res[0].shanghai, name: '上海' },
                            { value: res[0].shenzhen, name: '深圳' },
                            { value: res[0].hangzhou, name: '杭州' },
                            { value: res[0].qita, name: '其他' }
                        ],
                    }
                ]
            })
        })



        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('visitor'));
        // 绘制图表
        myChart.resize({
            width: 900,
            height: 400
        });
        myChart.setOption({
            title: {
                text: '用户分布',
                left: 'center'
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                left: 'left'
            },
            series: [
                {
                    name: 'Access From',
                    type: 'pie',
                    radius: '50%',
                    data: [
                        { name: '北京' },
                        { name: '上海' },
                        { name: '深圳' },
                        { name: '杭州' },
                        { name: '其他' }
                    ],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]

        });


    }, [])


    return (
        <div id="visitor" >

        </div>
    )


}